<template>
    <div class="header-content">
        <a href="">
            <div class="menu-list" :style="{backgroundImage: 'url(' + baseImg1+ ')'}">
                <div class="img-title">
                    <span>都江堰</span>
                </div>
                <div class="english-font">
                    <span>Understand the urban plan</span>
                </div>
            </div>
        </a>
        <div class="menu-list" :style="{backgroundImage: 'url(' + baseImg2+ ')'}">
            <div class="img-title">
                <span>未来定位</span>
            </div>
            <div class="english-font">
                <span>Future orientation</span>
            </div>
        </div>
        <div class="menu-list" :style="{backgroundImage: 'url(' + baseImg3+ ')'}">
            <div class="img-title">
                <span>未来布局</span>
            </div>
            <div class="english-font">
                <span>Future layout</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Content",
        data(){
            return {
                xin3:'/static/img/xin-3.png',
                baseImg1:'/static/img/city-1.png',
                baseImg2:'/static/img/city-2.png',
                baseImg3:'/static/img/city-3.png'
            }
        }
    }
</script>

<style lang="stylus" type="text/stylus" scoped>
    .header-content
        text-align :center
        .menu-list
            position:relative
            height :3.13rem
            width :9.4rem
            border-radius :.1rem
            background-size: cover;
            margin :.8rem auto
            .english-font
                position: absolute;
                height :.4rem
                top:2.5rem
                right:.6rem
                span
                  font-size :.267rem
                  color:#ffffff
            .img-title
                position: absolute;
                top:.53rem
                left:.3rem
                height :.57rem
                width :100%
                span
                    padding-left :.2rem
                    font-size:.36rem
                    color:#ffffff
                    font-weight :500
                    float :left
                    letter-spacing:.1rem

</style>